<template>
  <!-- 常跑线路 -->
  <div class="work-voucher-info">
    <el-form ref="form" :model="formData" label-width="150px">
      <el-button
        v-if="!readonly"
        @click="handleAdd"
        type="text"
        icon="el-icon-plus"
        >{{ $t('新增') }}</el-button
      >
      <el-table :data="formData.tableData">
        <el-table-column
          v-for="item in cols"
          :key="item.descNum"
          :label="item.tableColumnName"
          :prop="item.descNum"
        >
          <template slot-scope="{ row, $index }">
            <el-form-item
              label-width="0"
              :prop="`tableData.${$index}.${item.descNum}`"
            >
              <el-input
                :disabled="readonly"
                v-model="row[item.descNum]"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('操作')" width="100" v-if="!readonly">
          <template slot-scope="{ row, $index }">
            <el-button
              type="text"
              @click="handleDel($index)"
              v-if="formData.tableData && formData.tableData.length > 1"
              >{{ $t('删除') }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>
<script>
import nonStandardService from '@/services/nonStandardService'
export default {
  name: 'UsualLine',
  props: {
    detail: {
      type: Object,
      default: () => {
        return {}
      },
    },
    value: {},
    disabled: Boolean,
    parameter: {
      type: Object,
      default: () => {
        return {}
      },
    },
    definitionId: {},
  },
  data() {
    return {
      formData: {
        tableData: [{}],
      },
      readonly: false,
      cols: [],
      tableCols: [],
    }
  },
  created() {
    this.readonly = Boolean(this.$route.query.readonly)
    this.getCols()
    if (this.value) {
      this.setData()
    } else {
      this.$emit('input', this.formData.tableData)
    }
  },
  methods: {
    getCols() {
      nonStandardService.queryUsualLineColumnList({}).then((res) => {
        if (res.code == 200) {
          this.cols = res.data.data || []
          // 修改部分：将数组转换为一个对象
          let tableCols = this.cols.reduce((acc, item) => {
            acc[item.descNum] = item.tableColumnName
            return acc
          }, {})
          this.tableCols = [{ ...tableCols, isHeader: true }]
        }
      })
    },
    // 新增
    handleAdd() {
      if (this.formData.tableData.length > 9) {
        this.$message.warning(this.$t('最多只能添加10条数据'))
        return
      }
      this.formData.tableData.push({})
    },
    // 删除
    handleDel(index) {
      this.formData.tableData.splice(index, 1)
    },
    setData() {
      if (this.value && JSON.parse(this.value).length) {
        let data = JSON.parse(this.value)
        // 去除第一条表头数据
        this.formData.tableData = data.filter((it) => !it.isHeader)
      } else {
        this.formData.tableData = [{}]
      }
      this.$emit('input', this.formData.tableData)
    },
    getData() {
      let tableData = []
      tableData = this.tableCols.concat(this.formData.tableData)
      return tableData
    },
    // validator() {
    //     return this.$refs.form.validate();
    // },
  },
}
</script>
<style lang="scss" scoped>
.work-voucher-info {
  width: 100%;

  .work-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    width: 95%;
    min-width: 460px;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;

    .work-item {
      width: 90%;

      .work-upload-files {
        margin-top: 12px;
        display: flex;
        flex-wrap: wrap;

        .file {
          margin-right: 10px;
          cursor: pointer;
        }

        .el-icon-close {
          cursor: pointer;
          margin-left: 24px;
        }
      }
    }
  }
}
</style>
